home *** CD-ROM | disk | FTP | other *** search
/ Total Java Scripts / Total Java Scripts.iso / Javascripts / navigation / foldertree / frameset.txt < prev    next >
Text File  |  1998-10-30  |  8KB  |  273 lines
  1. <html>
  2.  
  3. <head>
  4. <title>JavaScript Cascading Menu Tree</title>
  5. <script LANGUAGE="JavaScript">
  6. <!--  Hiding Script
  7.  
  8. // *****************************
  9. // Node 0 = opens in right frame
  10. // Node 1 = opens in new window
  11. // ***************************** 
  12.  
  13. // *****************************
  14. // Generate Data
  15. // *****************************
  16.  
  17. function generateTree()
  18. {
  19. var aux1, aux2, aux3, aux4
  20.  
  21.     foldersTree = folderNode("Start Folder")
  22.         aux1 = appendChild(foldersTree, folderNode("JavaScript"))
  23.             aux2 = appendChild(aux1, leafNode("Scripts"))
  24.                 appendChild(aux2, generateDocEntry(0, "JavaScripts.com", "http://www.javascripts.com", ""))
  25.                 appendChild(aux2, generateDocEntry(0, "JavaScript Planet", "http://www.geocities.com/SiliconValley/7116/", ""))
  26.                 appendChild(aux2, generateDocEntry(0, "Polands' JavaScript", "http://www.sapien.net/demo/javascript/", ""))
  27.             aux2 = appendChild(aux1, leafNode("Tutorials"))
  28.                 appendChild(aux2, generateDocEntry(0, "Ask the JavaScript Pro", "http://www.inquiry.com/techtips/js_pro/", ""))
  29.                 appendChild(aux2, generateDocEntry(0, "JavaScript 411", "http://www.freqgrafx.com/411/", ""))
  30.         aux1 = appendChild(foldersTree, folderNode("Links"))
  31.             aux2 = appendChild(aux1, folderNode("Internet"))
  32.                 aux3 = appendChild(aux2, leafNode("Browsers"))
  33.                     appendChild(aux3, generateDocEntry(1, "MS Internet Explorer", "www.microsoft.com/ie/", ""))
  34.                     appendChild(aux3, generateDocEntry(1, "Netscape Communicator", "home.netscape.com", ""))
  35.                 aux3 = appendChild(aux2,  leafNode("Computers"))
  36.                     appendChild(aux3,generateDocEntry(1, "PCworld", "www.pcworld.com/welcome.html", ""))
  37.                     appendChild(aux3,generateDocEntry(1, "Byte", "www.byte.com/", ""))
  38.                     appendChild(aux3,generateDocEntry(1, "cNET", "www.cnet.com", ""))
  39.                     appendChild(aux3,generateDocEntry(1, "ZDNet", "www.zdnet.com", ""))
  40.             aux2 = appendChild(aux1, folderNode("Downloads"))
  41.                 aux3 = appendChild(aux2,  leafNode("Shareware"))
  42.                     appendChild(aux3, generateDocEntry(1, "Windows95.com", "www.windows95.com/apps", ""))
  43.                     appendChild(aux3, generateDocEntry(1, "Download.com", "www.download.com", ""))
  44.                     appendChild(aux3, generateDocEntry(1, "ZDNet's Hotfiles", "www.hotfiles.com", ""))
  45.             aux2 = appendChild(aux1, leafNode("Search"))
  46.                 appendChild(aux2,generateDocEntry(1, "HotBot", "www.hotbot.com", ""))
  47.                 appendChild(aux2,generateDocEntry(1, "Yahoo", "www.yahoo.com", ""))
  48.                 appendChild(aux2,generateDocEntry(1, "Lycos", "www.lycos.com", ""))
  49.         aux1 = appendChild(foldersTree, folderNode("Total Java Scripts"))
  50. appendChild(aux2,generateDocEntry(1, "HotBot", "www.hotbot.com", ""))
  51.             
  52.  
  53. aux2 = appendChild(aux1, folderNode("Downloads"))
  54.         
  55. }
  56.  
  57. // *****************************
  58. // Auxiliary function to create the node
  59. // *****************************
  60. function folderNode(name)
  61. {
  62. var arrayAux
  63.     arrayAux = new Array
  64.     arrayAux[0] = 0
  65.     arrayAux[1] = 0
  66.     arrayAux[2] = 0
  67.     arrayAux[3] = name
  68.         
  69.         return arrayAux
  70. }
  71.  
  72. // *****************************
  73. // Auxiliary function to create the node
  74. // *****************************
  75. function leafNode(name)
  76. {
  77. var arrayAux
  78.     arrayAux = new Array
  79.     arrayAux[0] = 0
  80.     arrayAux[1] = 0
  81.     arrayAux[2] = 1
  82.     arrayAux[3] = name
  83.         
  84.         return arrayAux
  85. }
  86.  
  87. function appendChild(parent, child)
  88. {
  89.     parent[parent.length] = child
  90.     return child
  91. }
  92.  
  93. function generateDocEntry(icon, docDescription, link)
  94. {
  95. var retString =""
  96.  
  97.     if (icon==0)
  98.         retString = "<A href='"+link+"' target=folderFrame><img src='doc.gif' alt='Opens in right frame'"
  99.     else
  100.         retString = "<A href='http://"+link+"' target=_blank><img src='link.gif' alt='Opens in new window'"
  101.     retString = retString + " border=0></a><td nowrap><font size=-1 face='Arial, Helvetica'>" + docDescription + "</font>"
  102.  
  103.     return retString
  104.  
  105. }
  106.  
  107.  
  108. // *****************************
  109. // Display functions
  110. // *****************************
  111.  
  112. function redrawTree()
  113. {
  114. var doc = top.treeFrame.window.document
  115.  
  116.     doc.clear()
  117.     doc.write("<body bgcolor='white'>")    
  118.     redrawNode(foldersTree, doc, 0, 1, "")
  119.     doc.close()
  120. }
  121.  
  122. function redrawNode(foldersNode, doc, level, lastNode, leftSide)
  123. {
  124. var j=0
  125. var i=0
  126.  
  127.     doc.write("<table border=0 cellspacing=0 cellpadding=0>")
  128.     doc.write("<tr><td valign = middle nowrap>")
  129.  
  130.     doc.write(leftSide)
  131.  
  132.     if (level>0)
  133.         if (lastNode) //the last 'brother' in the children array
  134.         {
  135.             doc.write("<img src='lastnode.gif' width=16 height=22>")
  136.             leftSide = leftSide + "<img src='blank.gif' width=16 height=22>" 
  137.         }
  138.         else
  139.         {
  140.             doc.write("<img src='node.gif' width=16 height=22>")
  141.             leftSide = leftSide + "<img src='vertline.gif' width=16 height=22>"
  142.         }
  143.  
  144.     displayIconAndLabel(foldersNode, doc)
  145.     doc.write("</table>")
  146.  
  147.     if (foldersNode.length > 4 && foldersNode[0]) //there are sub-nodes and the folder is open
  148.     {
  149.         if (!foldersNode[2]) //for folders with folders
  150.         {
  151.             level=level+1
  152.             for (i=4; i<foldersNode.length;i++)
  153.                 if (i==foldersNode.length-1)
  154.                     redrawNode(foldersNode[i], doc, level, 1, leftSide)
  155.                 else
  156.                     redrawNode(foldersNode[i], doc, level, 0, leftSide)
  157.         }
  158.         else //for folders with documents
  159.         {
  160.             for (i=4; i<foldersNode.length;i++)
  161.             {
  162.                 doc.write("<table border=0 cellspacing=0 cellpadding=0 valign=center>")
  163.                 doc.write("<tr><td nowrap>")
  164.                 doc.write(leftSide)
  165.                 if (i==foldersNode.length - 1)
  166.                     doc.write("<img src='lastnode.gif' width=16 height=22>")
  167.                 else
  168.                     doc.write("<img src='node.gif' width=16 height=22>")
  169.                 doc.write(foldersNode[i])
  170.                 doc.write("</table>")
  171.             }
  172.         }
  173.     }
  174. }
  175.  
  176. // *****************************
  177. // Creates the html code to display a folder and its label
  178. // *****************************
  179. function displayIconAndLabel(foldersNode, doc)
  180. {
  181.     doc.write("<A href='javascript:top.openBranch(\"" + foldersNode[3] + "\")'><img src=")
  182.     if (foldersNode[1])
  183.         doc.write("openfolder.gif width=24 height=22 border=noborder></a>")
  184.     else
  185.         doc.write("closedfolder.gif width=24 height=22 border=noborder></a>")
  186.     doc.write("<td valign=middle align=left nowrap>")
  187.     doc.write("<font size=-1 face='Arial, Helvetica'>"+foldersNode[3]+"</font>")
  188. }
  189.  
  190. // *****************************
  191. // Recursive functions
  192. // *****************************
  193.  
  194. //when a parent is closed all children also are
  195. function closeFolders(foldersNode)
  196. {
  197. var i=0
  198.  
  199.         if (!foldersNode[2])
  200.     {
  201.             for (i=4; i< foldersNode.length; i++)
  202.                    closeFolders(foldersNode[i])
  203.  
  204.     }
  205.         foldersNode[0] = 0
  206.         foldersNode[1] = 0
  207. }
  208.  
  209. //recursive over the tree structure
  210. //called by openbranch
  211. function clickOnFolderRec(foldersNode, folderName)
  212. {
  213. var i=0
  214.  
  215.         if (foldersNode[3] == folderName)
  216.     {
  217.         if (foldersNode[0])
  218.             closeFolders(foldersNode)
  219.         else
  220.         {
  221.             foldersNode[0] = 1
  222.                     foldersNode[1] = 1
  223.         }
  224.     }
  225.     else
  226.     {
  227.             if (!foldersNode[2])
  228.                 for (i=4; i< foldersNode.length; i++)
  229.                        clickOnFolderRec(foldersNode[i], folderName)
  230.     }
  231. }
  232.  
  233.  
  234. // *****************************
  235. // Event handlers
  236. // *****************************
  237.  
  238. //called when the user clicks on a folder
  239. function openBranch(branchName)
  240. {
  241.     clickOnFolderRec(foldersTree, branchName)
  242.     if (branchName=="Start folder" && foldersTree[0]==0)
  243.         top.folderFrame.location="basefolder.htm"
  244.     timeOutId = setTimeout("redrawTree()",100)
  245. }
  246.  
  247. //called after this html file is loaded
  248. function initializeTree()
  249. {
  250.     generateTree()
  251.     redrawTree()
  252. }
  253.  
  254. var foldersTree = 0
  255. var timeOutId = 0
  256. generateTree()
  257.  
  258.  
  259. // end hiding script  -->
  260. </script>
  261. </head>
  262.  
  263. <frameset onLoad="initializeTree()" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0"
  264. cols="225,*">
  265.   <frame src="tree.htm" name="treeFrame">
  266.   <frame SRC="folder.htm" name="folderFrame">
  267.   <noframes>
  268.   <body>
  269.   </body>
  270.   </noframes>
  271. </frameset>
  272. </html>
  273.